// var
@tree-prefix-cls         : x-tree;
@tree-font-weight        : normal;
@tree-font-size-small    : 12px;
@tree-font-size          : 14px;
@tree-font-size-large    : 16px;
@color-1                 : #a28f6f;
@color-2                 : #775737;
@color-3                 : #19be6b;

// mixins
.tree-size(@font-size) {
  &.@{tree-prefix-cls} {
    padding-top: @font-size * 2;
    padding-bottom: @font-size * 2;
    font-size: @font-size;
    line-height: @font-size * 1.8;
  }
  .@{tree-prefix-cls}__body {
    padding-left: @font-size;
  }
  .@{tree-prefix-cls}__head,
  .@{tree-prefix-cls}__foot {
    height: @font-size * 2;
    &_line,
    &_icon {
      width: @font-size * 2;
    }
  }
  .@{tree-prefix-cls}-node {
    &__title {
      padding-left: @font-size;
      &_arrow {
        width: @font-size * 2;
        height: @font-size * 1.8;
        left: -@font-size;
        .xvu-iconfont {
          font-size: @font-size;
        }
      }
    }
    &__content {
      padding-left: @font-size;
    }
    &-rootnode {
      & > .@{tree-prefix-cls}-node__title {
        font-size: @font-size * 1.2;
      }
    }
  }
}
@keyframes spinner {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

// styles - default
.@{tree-prefix-cls} {
  width: 100%;
  height: 100%;
  text-align: left;
  color: @color-1;
  overflow: hidden;
  .tree-size(@tree-font-size);
  position: relative;
  &__head,
  &__foot {
    position: absolute;
    left: 0;
    right: 0;
    &_line,
    &_icon {
      height: 50%;
      position: absolute;
      left: 0;
      top: 0;
      text-align: center;
      .flex-center;
    }
    &_line {height: 25%;}
    &_icon {
      height: 75%;
      .xvu-iconfont {
        font-size: .8em;
      }
    }
    &_line::before {
      content: "";
      display: inline-block;
      height: 100%;
      width: 1px;
      background-color: @color-1;
    }
  }
  &__head {
    top: 0;
    &_line {
      top: 75%;
    }
  }
  &__foot {
    bottom: 0;
    &_icon {
      top: 25%;
    }
  }
  &__body {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden auto;
    &_empty {
      height: 0;
      flex-grow: 1;
      border-left: 1px solid @color-1;
    }
  }
  &-node {
    &__title {
      position: relative;
      &_arrow {
        position: absolute;
        top: 0;
        .flex-center;
        .xvu-iconfont {
          transition: all .3s linear;
          transform: rotate(0deg);
        }
        .xvu-spinner {
          animation: spinner 4s linear infinite;
        }
        &&_open {
          .xvu-iconfont {
            transform: rotate(45deg);
          }
        }
      }
      &_text {
        display: inline-block;
        height: 100%;
        padding-right: .5em;
        cursor: pointer;
      }
    }
    &__content {
      height: auto;
      overflow: hidden;
      transition: all .5s ease;
      position: relative;
    }
    &&-rootnode {
      color: @color-2;
      & > .@{tree-prefix-cls}-node__content {
        padding-top: .25em;
        padding-bottom: .25em;
        border-left: 1px solid @color-1;
      }
    }
  }
}

// styles - more
.@{tree-prefix-cls} {
  &-small {
    .tree-size(@tree-font-size-small);
  }
  &-large {
    .tree-size(@tree-font-size-large);
  }
}
